﻿@{ 
    ViewBag.IncludePrism = true;
}
<div id="content">
    <h1>Try DotLiquid Online</h1>

    <p>
        This page lets you interactively try out the DotLiquid templating system. It's also proof
        that it's okay to allow your users to edit their own templates - if we trust it so can you!
    </p>
    <br />

    <h3>Template Code</h3>
    <div id="templateCode">@Html.Raw(ViewData["TemplateCode"] as string)</div>
    <br />

    <h3>Result</h3>
    <pre class="result"><code id="result" class="language-html">@Html.Raw(ViewData["Result"] as string)</code></pre>
    <br />
</div>
<div id="side">
    <h1>Instructions</h1>
    <p>The available objects are structured and created as follows:</p>
    <br />
    <pre class="sample"><code class="language-csharp">public class User : Drop
{
	public string Name { get; set; }
	public List&lt;Task&gt; Tasks { get; set; }
}

public class Task
{
	public string Name { get; set; }
}

user = new User
{
	Name = "Tim Jones",
	Tasks = new List&lt;Task&gt;
	{
		new Task { Name = "Documentation" },
		new Task { Name = "Code comments" }
	}
} </code></pre>
    <br />
    <p>
        You can refer to the <a href="https://github.com/dotliquid/dotliquid/wiki/DotLiquid-Syntax-Compatibility">DotLiquid Syntax Compatibility</a> doc to find out which tags and filters are available.
    </p>
    <h2>How does this work?</h2>
    <p>Why not have a look at the <a href="https://github.com/dotliquid/dotliquid/blob/master/src/DotLiquid.Website/Controllers/TryOnlineController.cs">source code</a> of the page you're looking at now?</p>
</div>

@section ScriptContent {
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.2.8/ace.js" integrity="sha256-198+Grx89n2ofVwo1LWnNTXxIQZIPZJURv+K73cJ93U=" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.2.8/mode-liquid.js" integrity="sha256-YXOIP+CSwMUnq0RPu67MploF0N5oHTQQ56/BbW0sxw8=" crossorigin="anonymous"></script>

    <script type="text/javascript">
        var editor = ace.edit("templateCode");
        editor.setTheme("ace/theme/chrome");
        editor.getSession().setMode("ace/mode/liquid");
        editor.renderer.setShowGutter(false);
        editor.renderer.setPadding(10);
        editor.setHighlightActiveLine(false);
        editor.renderer.setScrollMargin(10, 0);


        editor.on("change", function (e) {
            $.post('@Url.Action("Liquify")', { templateCode: editor.getValue() }, function (data) {
                $("#result").html(Prism.highlight(data, Prism.languages.html));
            });
        })
    </script>
}